<template>
    <div class="doctor-search">
        <!-- 标题 -->
        <div class="title">
            <h2>医生管理</h2>
        </div>

        <!-- 使用 el-form 内联表单实现筛选条件 -->
        <div class="filter-section">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="所属机构">
                    <el-select v-model="formInline.organization" placeholder="请选择" clearable>
                        <el-option label="请选择" value=""></el-option>
                        <el-option label="机构A" value="orgA"></el-option>
                        <el-option label="机构B" value="orgB"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="所属团队">
                    <el-select v-model="formInline.libraryType" placeholder="请选择" clearable>
                        <el-option label="请选择" value=""></el-option>
                        <el-option label="类型A" value="typeA"></el-option>
                        <el-option label="类型B" value="typeB"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="医生标签">
                    <el-select v-model="formInline.doctorTag" placeholder="请选择" clearable>
                        <el-option label="请选择" value=""></el-option>
                        <el-option label="标签A" value="tagA"></el-option>
                        <el-option label="标签B" value="tagB"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleAddDoctor">新增医生</el-button>
                    <el-button @click="handleExport">导出</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 搜索区域 -->
        <div class="search-section">
            <el-input 
                v-model="formInline.keyword" 
                style="width: 240px" 
                placeholder="输入关键字" 
                :suffix-icon="Search" 
                @input="handleSearch"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 定义事件
const emit = defineEmits(['add-doctor', 'search', 'export'])

// 表单数据
const formInline = reactive({
    organization: '',
    libraryType: '',
    doctorTag: '',
    keyword: ''
})

// 监听搜索条件变化
watch(formInline, (newVal) => {
    emit('search', { ...newVal })
}, { deep: true })

// 新增医生方法
const handleAddDoctor = () => {
    emit('add-doctor')
}

// 导出方法
const handleExport = () => {
    emit('export')
}

// 搜索方法
const handleSearch = () => {
    emit('search', { ...formInline })
}
</script>

<style scoped>
.doctor-search {
    padding: 20px;
    background: #fff;
}

.title {
    margin-bottom: 20px;
}

.title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    position: relative;
    padding-left: 12px;
}

.title h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #409EFF;
    border-radius: 2px;
}

.filter-section {
    margin-bottom: 20px;
}

.search-section {
    margin-bottom: 20px;
}

.demo-form-inline .el-form-item {
    margin-right: 20px;
    margin-bottom: 16px;
}

.demo-form-inline .el-select {
    width: 200px;
}

/* 按钮组样式 */
.demo-form-inline .el-form-item:last-child .el-button+.el-button {
    margin-left: 12px;
}
</style>
